<template>
  <div class="about-home">
    <v-container class="about-container">
      <v-row no-gutters class="about-row">
        <v-col cols="12">
          <v-card>
            <v-card-title class="about-title">
              <h1 style="width: 100%">
                About
              </h1>
            </v-card-title>
            <v-tabs
                class="tabs"
                slider-color="yellow"
                v-model="tab"
                next-icon="mdi-arrow-right-bold-box-outline"
                prev-icon="mdi-arrow-left-bold-box-outline"
                show-arrows center-active>
              <v-tab
                  v-for="item in tabs"
                  :key="item.id">
                {{ item.title }}
              </v-tab>
            </v-tabs>
            <v-tabs-items v-model="tab" style="background: unset;">
              <v-tab-item
                  v-for="item in tabs"
                  :key="item.id" >
                <synopsis v-show="item.id==='synopsis'"></synopsis>
                <cat v-show="item.id==='cat'"></cat>
                <resume v-show="item.id==='resume'"></resume>
                <friend v-show="item.id==='friend'"></friend>
                <feeding v-show="item.id==='feeding'"></feeding>
              </v-tab-item>
            </v-tabs-items>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>
<script>
import synopsis from '@/views/synopsis.vue'
import cat from '@/views/cat.vue'
import resume from '@/views/resume.vue'
import friend from '@/views/friend.vue'
import feeding from '@/views/feeding.vue'
export default {
  name: 'Home',
  components: {
    synopsis,
    cat,
    resume,
    friend,
    feeding
  },
  data() {
    return {
      actives : true,
      tab: '',
      tabs: [{
        id:'synopsis',
        title:'简介',
      },{
        id:'cat',
        title:'喵喵',
      },{
        id:'resume',
        title:'简历',
      },{
        id:'friend',
        title:'朋友',
      },{
        id:'feeding',
        title:'投食',
      }],
    }
  },
  computed: {

  },
  mounted() {
  },
  methods:{

  }
}
</script>
<style>
.about-home{
  width: 100%;
  height: 100%;
  background: url("https://www.hualigs.cn/image/60a1f7b0b9042.jpg") no-repeat center;
  background-size: cover;
  overflow-y: auto;
}
.about-row .v-tabs-bar {
   background-color: #ffadad !important;
 }
.about-container .yellow {
  background-color: #ff2d4a!important;
  border-color: #ff2d4a!important;
}
.about-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: unset;
}
.about-container .about-row {
  height: auto;
}
.about-container .about-row .about-title {
  width: auto;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.7);
}
.about-home .v-card{
  background: unset !important;
}
</style>
